<html>
<head>
<#assign basePath=request.contextPath>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台管理系统</title>
<#include "/WEB-INF/views/template/bootMainCss.ftl" parse=true encoding="utf-8">
    <!-- bootstrap-datetimepicker -->
    <link href="${pageContext.request.contextPath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/bootstrap/css/form.lzy.css" rel="stylesheet">
</head>
<body>
<shiro:hasPermission name="sys:process:detail">
    <input id="p_detail"  value="1" type="hidden">
</shiro:hasPermission>
<div class="content-header">
    <h5>流程审批</h5>
</div>

<div class="panel panel-lzy">
    <div class="panel-body">
        <h5 class="tips-lzy">操作提示</h5>
        <ul class="tips-list-lzy">
            <li><span>◆&nbsp;该页面显示了平台所有的审核申请，可对审核进行查看编辑操作。</span></li>
            <li><span>◆&nbsp;可输入关键字或选择项进行相关查询（可单项查询）。</span></li>
        </ul>
    </div>
</div>

<div class="panel panel-f5">
    <div class="panel-body row item-right">
        <form id="myForm" class="form-inline form-margin-right">
            <div class="form-group">
                <span>审核事件：</span>
                <select class="form-control required" id="auditEventId">
                    <option value="" >请选择</option>
                <#list eventList as var>
                    <option value="${var.id!}">${var.name!}</option>
                </#list>
                <#--<c:forEach items="${eventList}" var="var">-->
                <#--<option value="${var.id}" >${var.name}</option>-->
                <#--</c:forEach>-->
                </select>
            </div>
            <div class="form-group">
                <span>状态：</span>
                <select class="form-control required" id="status">
                    <option value="" >请选择</option>
                    <option value="0" >审核中</option>
                    <option value="1" >审核通过</option>
                    <option value="2" >审核失败</option>
                </select>
            </div>
            <div class="form-group">
                <span>申请人：</span>
                <input type="text" class="form-control" id="applicantName" placeholder="输入查询申请人姓名">
            </div>
            <div class="form-group">
                <span>经办人：</span>
                <input type="text" class="form-control" id="processAssigneeName" placeholder="输入查询经办人姓名">
            </div>
            <div class="form-group">
                <input type="hidden" id="userId" value="${userId!}" type="text">
                <button type="button" class="btn btn-primary btn-sm" onclick="search(1)">查询</button>
                <button type="button" class="btn btn-primary btn-sm" onclick="$('#myForm')[0].reset();">重置</button>
            </div>
        </form>
    </div>

    <!-- 分页查询的地址-->
    <div class="panel-body panel-white">
        <div class="table-responsive">
            <table id="myTable"
                   class="table table-hover"
                   data-url="${pageContext.request.contextPath}/admin/process/json"
                   data-pageSize="10,50,100" data-method="GET">
                <thead>
                <tr>
                    <th data-type="xuhao" >序号</th>
                    <th data-field="submitTime">提交时间</th>
                    <th data-field="auditEventName">审核事件</th>
                    <th data-field="applicantName">申请人</th>
                    <th data-field="applicantType">申请人身份</th>
                    <th data-field="processAssignee">经办人</th>
                    <th data-field="processStatus" data-call="true">状态</th>
                    <th data-field="button" data-call="true">操作</th>
                </tr>
                </thead>
                <tbody id="tbodyId">
                </tbody>
            </table>
        </div>
        <!-- 分页条-->
        <div class="row">
            <div align="left" class="col-xs-6">
                <div class="input-group">
                    <span class="input-group-addon" id="pageCount"></span>
                    <select id="pageSize" onchange="search(1)" class="form-control" style="width: 100px"></select>
                </div>
            </div>
            <div align="right" class="col-xs-6">
                <ul class="pagination" id="pagination"></ul>
            </div>
        </div>
    </div>
</div>

<#include "/WEB-INF/views/template/bootMainJs.ftl" parse=true encoding="utf-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/bootstrap/js/utils.js" type="text/javascript"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/bootstrap/plugin/jqPaginator/jqPaginator.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/bootstrap/plugin/jqPaginator/myPage.js"></script>
<!-- bootstrap-datetimepicker -->
<script type="text/javascript" src="${pageContext.request.contextPath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
    $(function () {
        // 绑定
        $("#applicantName").keydown(function(event){
            if(event.which == "13") {
                search(1);
                return false;
            }
        });
        $("#processAssigneeName").keydown(function(event){
            if(event.which == "13") {
                search(1);
                return false;
            }
        });
    });

    // 循环列表数据以及操作按钮
    function tableCallBack(data, id){
        if(id == 'processStatus') {
            if (data.processStatus == 0) {
                return '<span class="text-blue">审核中</span>';
            } else if (data.processStatus == 1) {
                return '<span class="text-green">审核通过</span>';
            } else if (data.processStatus == 2) {
                return '<span class="text-red">审核失败</span>';
            }
        } else if(id == 'button') {
            // 增加操作按钮
            var _button = '';
            var count = 0;
            if ($('#p_detail').val() == 1) {
                _button += '<button type="button" class="btn btn-white btn-xs" onclick="audit(\'' + data.id + '\');">查看 </button> ';
                count ++
            }
            return _button;
        } else {
            if(data[id] == null || data[id] == ''){
                return '';
            } else {
                return data[id];
            }
        }
    }

    // 查看
    function audit(id){
        location.href = "${pageContext.request.contextPath}/admin/process/view?id=" + id;
    }
</script>
</body>
</html>